<template>
  <div class="Integrated_Monitoring_GJGZPZ">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="
            this.$route.query.Token
              ? 'top:50px;left:10px'
              : 'top: 100px;padding:10px'
          "
        >
          <div>
            <el-radio-group v-model="radio" @change="type_change">
              <el-radio :label="3">服务告警</el-radio>
              <el-radio :label="6">MQ队列深度</el-radio>
            </el-radio-group>
          </div>
          <el-divider style="margin-top: 20px"></el-divider>
          <p v-if="radio == 3">
            <span>服务耗时超过</span>
            <el-input
              size="mini"
              style="display: inline-block; width: 90px; margin: 0 10px"
              v-model="input_val"
            ></el-input>
            <span>ms</span>
          </p>
          <p v-if="radio == 6">
            <span>队列深度超过</span>
            <el-input
              size="mini"
              style="display: inline-block; width: 90px; margin: 0 10px"
              v-model="input_val"
            ></el-input>
            <span></span>
          </p>
          <h3 style="margin-top: 100px">告警建议处理方式</h3>
          <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入内容"
            v-model="textarea"
            style="width: 80%"
          >
          </el-input>
          <el-row style="width: 80%; margin-top: 15px">
            <el-col :span="24">
              <el-button v-if="false" size="small" style="float: right"
                >恢复默认</el-button
              >
              <el-button
                size="small"
                style="float: right; margin-right: 10px"
                type="primary"
                @click="info"
                >保存</el-button
              >
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      radio: 3,
      input_val: "500000",
      textarea: "排查是否数据量大",
      type: "service",
    };
  },
  methods: {
    getData() {
      this.$post("/Monitor/Settings/Alarm?type=" + this.type).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.data = res.data;
          this.input_val = res.data._setparam;
          this.textarea = res.data._content;
        }
      });
    },
    type_change(val) {
      if (val == 3) {
        this.type = "service";
        this.getData();
      }
      if (val == 6) {
        this.type = "queue";
        this.getData();
      }
    },
    info() {
      let body = {
        _id: this.data._id,
        _ruletype: this.type,
        _setparam: this.input_val,
        _content: this.textarea,
      };
      this.$post("/Monitor/Settings/AlarmUpdate", body).then((res) => {
        if (res.code == 0) {
          this.getData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
  },
  mounted() {
    // document.getElementById("2").focus();
    this.getData();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
};
</script>
<style lang="scss">
.Integrated_Monitoring_GJGZPZ {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
}
</style>
